<template>
  <div class="container">
    <!-- 头部 -->
    <header>
      <!-- 选择 -->
      <select class="fl">
        <option>成都</option>
        <option>广州</option>
        <option>北京</option>
      </select>
      <!-- 输入框 搜索 -->
      <div class="search fl">
        <!-- <input type="image" src="images/ss.jpg">
        <input type="text" name="search" placeholder="寻找您的爱巢">-->
        <a href="brand.html">
          <img src="images/ss.png" />
          <span>寻找您的爱巢</span>
        </a>
      </div>
      <!-- 扫码 -->
      <img class="fr" src="images/shaoma.jpg" />
      <div class="clear"></div>
    </header>
    <!------------------------------------天气 ------------------------------------>
    <div :class="weather"></div>

    <!------------------------------------ 广告 轮播 ------------------------------------>
    <section class="banner">
      <swiper :options="swiperOption" v-if="adList.length>0">
        <swiper-slide v-for="(item,index) in adList" :key="index">
          <img :src="item.imgPath" />
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </section>

    <nav class="navtop">
      <ul>
        <li>
          <a href="#">
            <img src="images/logo1.jpg" />
            <p>整租</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/logo2.jpg" />
            <p>合租</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/logo3.jpg" />
            <p>资讯</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/logo1.jpg" />
            <p>新房源</p>
          </a>
        </li>
      </ul>
    </nav>
    <section class="content">
      <h1>本期优选</h1>
      <div class="select">
        <div class="left fl">
          <img src="images/1.jpg" />
        </div>
        <div class="right fr">
          <img src="images/2.jpg" />
          <img src="images/3.jpg" />
        </div>
        <div class="clear"></div>
      </div>
      <h1>
        周边推荐
        <a href="#" class="fr">更多></a>
      </h1>
      <!-- <img src="images/4.jpg"> -->
      <div class="map" id="allmap" style="width: 100%;height: 3.29rem;overflow: hidden;margin:0">
        <baidu-map id="allmap1" @ready="mapReady" :scroll-wheel-zoom="true"></baidu-map>
        <!-- <bm-marker :position="point" animation="BMAP_ANIMATION_BOUNCE">
        </bm-marker>-->
      </div>
      <h1>精选好房</h1>
      <ul class="c">
        <li>
          区域
          <span class="icon">&#xe6aa;</span>
        </li>
        <li>
          租金
          <span class="icon">&#xe6aa;</span>
        </li>
        <li>
          户型
          <span class="icon">&#xe6aa;</span>
        </li>
        <li>
          筛选
          <span class="icon">&#xe6aa;</span>
        </li>
      </ul>
      <ul class="case">
        <li v-for="(val,index) in baseHouse" :key="index">
          <router-link :to="{name:'detail',params:{hid:val.hid,type:'index'}}">
            <a href="javascript:;">
              <img :src="val.cover" class="fl" />
              <div class="text fr">
                <h1>{{val.name}}</h1>
                <p>{{val.desc}}</p>
                <ul>
                  <li
                    v-for="(v,k) in val.tag"
                    :key="k"
                    :class="v.status==='active'?'active':''"
                  >{{v.name}}</li>
                </ul>
                <p>
                  {{val.rentMoney}}
                  <span>元/月</span>
                </p>
              </div>
            </a>
          </router-link>
        </li>
      </ul>
      <p v-on:click="getMore" style="text-align: center;margin-bottom:1.5rem">{{LoadMore}}</p>
    </section>
  </div>
</template>

<script type="text/ecmascript-6">
import $ from "jquery";

export default {
  name: "index",
  data() {
    return {
      // -------------------------------------swiper轮播的变量----------------------------
      swiperOption: {
        //切换过渡时间
        speed: 900,
        //设置为true启动自动切换
        autoplay: {
          delay: 2000, //切换时间
          stopOnLastSlide: false, //切换到最后一个slide时停止自动切换。loop模式下无效
          disableOnInteraction: false, //用户操作swiper之后，是否禁止autoplay。默认为true：停止。
        },
        //是否循环轮播
        loop: true,
        //轮播图中下标点显示
        pagination: {
          el: ".swiper-pagination",
        },
        paginationClickable: false, //轮播图中下标点显示
      },
      adList: [],
      page: 1, //  页码
      LoadMore: "加载更多...",
      weather: "weather",
    };
  },
  //  加载子组件
  components: {},
  //生命周期
  created: function () {
    this.$axios({
      method: "get",
      url: "./data/ad_data.json",
    })
      .then((res) => {
        let data = res.data;
        if (data.code == 200) {
          this.adList = data.index_ad;
        }
      })
      .catch(function (err) {
        console.log(err);
      });

    //  调用(store/)中间件方法
    this.$store.dispatch("getHouse", this.page);
    // this.$store.dispatch('getHome');
  },
  mounted: function () {
    //  组件内容渲染后执行
    $(window).scrollTop(0); //  页面滚动置顶
  },
  methods: {
    //方法
    getMore() {
      if (
        this.$store.state.index.baseHouse.length >=
        this.$store.state.index.max_len
      ) {
        // this.LoadMore='没有更多了...'
        return;
      }
      this.$store.dispatch("getHouse", ++this.page);
    },
    mapReady({ BMap, map }) {
      // 选择一个经纬度作为中心点
      this.point = new BMap.Point(113.27, 23.13);
      map.centerAndZoom(this.point, 12);
    },
  },
  computed: {
    //计算属性(与data不同，它可以计算属性的值)
    baseHouse() {
      //  定义计算属性baseHouse
      return this.$store.state.index.baseHouse;
    },
  },
  watch: {
    //  监听变量事件（get、set）
    baseHouse() {
      //  我是有底线的
      if (
        this.$store.state.index.baseHouse.length >=
        this.$store.state.index.max_len
      ) {
        this.LoadMore = "没有更多了...";
        return;
      }
    },
  },
};
</script>

<style scoped lang="less" rel="stylesheet/less">
@import url("../assets/css/weather.css");

#allmap1 {
  height: 100%;
}
header {
  height: 0.7rem;
  margin: 0.35rem 0.25rem 0;
  font-size: 0.28rem;
}
header select {
  width: 1rem;
  background-color: #fff;
  border: none;
  margin-top: 0.15rem;
  outline: none;
  font-family: inherit;
  font-size: 0.28rem;
}

header select option {
  border: none;
  background-color: #fff;
  outline: none;
}

header .search {
  width: 5rem;
  height: 0.7rem;
  background-color: #f7f7f7;
  position: relative;
  left: 0.1rem;
}

header .search input[type="image"] {
  width: 0.24rem;
  height: 0.24rem;
  position: relative;
  left: 0.33rem;
  top: 0.25rem;
}

header .search input[type="text"] {
  background-color: #f7f7f7;
  border: none;
  font-family: inherit;
  position: relative;
  left: 0.5rem;
  top: 0.2rem;
}

header .search a {
  width: 100%;
  height: 100%;
  display: block;
}

header .search img {
  width: 0.24rem;
  height: 0.24rem;
  position: relative;
  left: 0.33rem;
  top: 0.25rem;
}

header .search span {
  position: relative;
  left: 0.5rem;
  top: 0.2rem;
  color: #9e9e9e;
}

header > img {
  width: 0.38rem;
  height: 0.38rem;
  margin-top: 0.13rem;
}

.banner {
  margin-top: 0.2rem;
}

.navtop ul {
  display: flex;
  justify-content: space-around;
  margin: 0.4rem 0.42rem 0;
}

.navtop ul li {
  /*width: 1rem;*/
  width: 25%;
  height: 1.1rem;
  text-align: center;
}

.navtop ul li a {
  width: 100%;
  height: 100%;
  display: block;
}

.navtop ul li img {
  width: 0.46rem;
  height: 0.46rem;
  display: block;
  margin: 0 auto;
}

.navtop ul li p {
  color: #5e5e5e;
  font-size: 0.28rem;
  margin-top: 0.18rem;
}

.content {
  margin: 0 0.24rem 1.2rem;
}

.content > h1 {
  font-size: 0.48rem;
  margin-top: 0.4rem;
  margin-bottom: 0.2rem;
  font-weight: 600;
}

.content > h1 > a {
  font-size: 0.28rem;
  line-height: 0.48rem;
  display: inline-block;
  color: #7d7d7d;
  margin-top: 0.1rem;
  font-weight: normal;
}

.content .select {
  width: 100%;
  max-height: 3.42rem;
}

.content img {
  width: 100%;
  display: block;
}

.content .select .left {
  width: 3.37rem;
}

.content .select .right {
  width: 3.35rem;
}

.content .select .right > img:nth-child(2) {
  margin-top: 0.22rem;
}

/* 天气 */

.weather {
  display: flex;
  width: 6.9rem;
  height: 1.2rem;
  border-radius: 0.6rem;
  background-color: #c6ebff;
  font-size: 0.16rem;
  padding-top: 0.1rem;
  box-sizing: border-box;
  /* color: #fff; */
  margin: 0 auto;
  margin-top: 0.2rem;
}

.temperature {
  font-size: 0.7rem;
  width: 2rem;
  text-align: center;
  margin-right: 0.2rem;
}

.temperature span {
  font-size: 0.6rem;
  position: relative;
  top: 0.05rem;
}

.weather-info {
  flex: 3;
}

.weather-info p {
  line-height: 0.35rem;
}

.weather-img {
  flex: 2;
  text-align: center;
  line-height: 0.6rem;
}

.weather-img img {
  display: block;
  width: 0.7rem;
  height: 0.5rem;
  margin: 0 auto;
}
</style>
